<template>
  <transition name="fade">
    <div class="sidebar">
      <ul>
        <li v-for="(item,index) in  classData"
            @click='clickTwoSons(index,item)'
            v-if="index<=3"
            :class='[sonsActive===index?"activeColor":""]'
            :key='item.classId'>
          {{item.className}}
        </li>
      </ul>
      <div class='gift'>
        <img src="@/assets/icon-lp-nav@2x.png"
             alt="">
        水趣有礼
      </div>
    </div>
  </transition>
</template>

<script>
// @ is an alias to /src
import myHeader from "@/views/Home/myHeader";

export default {
  data () {
    return {
      wrapHeight: 0,
      openPullDown: false,

      sonsActive: 0,

    }
  },
  props: {
    classData: null,
  },
  watch: {
    openPullDown (n) {
      if (n) {

        let _that = this;
        _that.wrapHeight = this.$refs.itemRefs[0].clientHeight * this.classData.length;
      } else {
        this.wrapHeight = 0
      }
    }
  },
  components: {
    myHeader
  },
  mounted () {



    //  0.906667*
  },
  methods: {
    // clickOpen () {
    //   this.openPullDown = !this.openPullDown;
    // },
    closeWrap (e) {
      if (e.target.className == 'pull-down-wrap') {
        this.openPullDown = false;

      }
    },
    select (i) {
      if (this.active == i) {
        return
      }
      this.active = i;
      this.sonsActive = '';
    },
    clickTwoSons (index, item) {
      if (this.sonsActive === index) { return }
      this.sonsActive = index;
      if (item.classId === -1) {
        this.$emit('change', '')
      } else {
        this.$emit('change', item)
      }

      this.openPullDown = false;

    }
  }
};
</script>
<style lang="scss">
@import "@/common/scss/mixin.scss";
.sidebar {
  @include fjc(center, space-between);
  background: #fff;
  position: relative;
  overflow: hidden;
  > ul {
    @include fjc(center, flex-start);

    height: 88px;
    li {
      min-width: 112px;
      font-size: 26px; /*px*/
      padding: 15px 0;
      border-radius: 8px;
      align-self: stretch;
      color: #979797;
      @include fjc;
      img {
        height: 25px;
        min-width: 25px;
        position: relative;
        top: 2px;
      }
    }
    .activeColor {
      position: relative;
      font-size: 32px; /*px*/
      @include color111;
      &::after {
        position: absolute;
        content: "";
        display: block;
        width: 100%;
        height: 4px;
        background: $style-a;
        left: 0;
        bottom: 0;
      }
    }
  }
  .gift {
    width: 200px;
    @include fjc;
    box-shadow: -1px 0px 9px #C1C1C1;

    align-self: stretch;
    img {
      width: 40px;
      margin-right: 8px;
      vertical-align: middle;
    }
  }
}
</style>
